<!--
  Copyright (c) 2020 classmate-sun
  [Software Name] is licensed under Mulan PSL v2.
  You can use this software according to the terms and conditions of the Mulan PSL v2.
  You may obtain a copy of Mulan PSL v2 at:
          http://license.coscl.org.cn/MulanPSL2
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  See the Mulan PSL v2 for more details.
-->

<template>
  <div>

  </div>
</template>

<script>



export default {
  name: "Music",
  components: {
  },
  data() {
    return {
      audio: [
        {
          name: '东西（Cover：林俊呈）',
          artist: '纳豆',
          url: 'https://cdn.moefe.org/music/mp3/thing.mp3',
          cover: 'https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/thing.lrc',
        },
        {
          name: '响喜乱舞（Cover：MARiA）',
          artist: '泠鸢yousa',
          url: 'https://cdn.moefe.org/music/mp3/kyoukiranbu.mp3',
          cover: 'https://p1.music.126.net/AUGVPQ_rVrngDH9ocQrn3Q==/109951163613037822.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/kyoukiranbu.lrc',
        },
        {
          name: '啵唧',
          artist: 'Hanser',
          url: 'https://cdn.moefe.org/music/mp3/kiss.mp3',
          cover: 'https://p1.music.126.net/K0-IPcIQ9QFvA0jXTBqoWQ==/109951163636756693.jpg?param=300y300', // prettier-ignore
          lrc: 'https://cdn.moefe.org/music/lrc/kiss.lrc',
        },
      ],
    };
  },
  computed: {

  },
  methods: {






  },

  mounted() {

  },
};
</script>

<style lang="less" scoped>
#nav {
  // overflow: hidden;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 1260px;
  height: 60px;
  background-color: rgba(245, 250, 252, 0.9);
  border-bottom: 1px solid #e8e9e7;
  user-select: none;
  > .nav-main {
    box-sizing: border-box;
    width: 100%;
    max-width: 1360px;
    height: 60px;
    margin: 0 auto;
    padding: 0 50px;
    .n-m-logo {
      float: left;
      width: 300px;
      height: 60px;
      line-height: 60px;
      text-align: left;
      color: #444;
      font-size: 40px;
      font-family: FZJianQRTJW;
      img {
        height: 45px;
        width: auto;
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    .n-m-login {
      position: relative;
      float: right;
      width: 150px;
      height: 60px;
      line-height: 60px;
      .el-button {
        padding: 9px 13px;
      }
      > div.userInfo {
        width: 100%;
        height: 100%;
      }
    }
    .n-m-nav {
      float: right;
      width: 475px;
      height: 60px;
      margin-right: 18%;
      ul {
        display: flex;
        width: 100%;
        height: 100%;
        li {
          width: 80px;
          flex: 1;
          a {
            position: relative;
            display: block;
            width: 80px;
            height: 100%;
            text-align: center;
            line-height: 60px;
            color: #212220;
            font-weight: 400;
            font-size: 15px;
            transition: color 0.5s;
            &::after {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              margin: 0 auto;
              content: "";
              width: 0;
              height: 2px;
              background-color: #6bc30d;
              transition: width 0.5s;
            }
            &:hover {
              color: #6bc30d;
              &::after {
                width: 90%;
              }
            }
          }
        }
        &.list1 li:nth-child(1),
        &.list2 li:nth-child(2),
        &.list3 li:nth-child(3),
        &.list4 li:nth-child(4),
        &.list5 li:nth-child(5),
        &.list6 li:nth-child(6),
        &.list7 li:nth-child(7),
        &.list8 li:nth-child(8) {
          a {
            color: #6bc30d;
            &::after {
              width: 90%;
            }
          }
        }
      }
    }
  }
}
.mainconbox {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
}
@media (max-width: 992px) {
  #nav {
    width: 100%;
    min-width: 100px;
    > .nav-main {
      padding: 0 20px;
      .n-m-nav {
        width: 506px;
        margin-right: 10px;
        ul {
          li {
            width: 63px;
          }
        }
      }
    }
  }
}
</style>



















